<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'
import navbar from '@/components/navbar.vue'
import tabbar from '@/components/tabbar.vue'

// defineProps<{ msg: string }>()
const active = ref(0)
// const username = ref('')
// const password = ref('')
// ruoter
const router = useRouter()
const goLink = (type) => {
  if (type == 1) {
    router.push({ path: '/email-list' })
  } else if (type == 2) {
    router.push({ path: '/logs' })
  } else if (type == 3) {
    router.push({ path: '/setting' })
  } else if (type == 4) {
    showDialog({
      title: '当前版本V1.1.0',
      message: '更多功能待定'
    }).then(() => {
      // on close
    })
  }
}
onMounted(() => {})
</script>

<template>
  <navbar title="设置" left="true"> </navbar>
  <div class="box-head">
    <img src="../../../assets/img/chat/default-user.png" alt="" />
    <div class="box-right">
      <div class="name">sky</div>
      <div class="account">1111-99999-00000</div>
      <div class="btn" @click="router.push({ path: '/account' })">管理账户</div>
    </div>
  </div>
  <div class="box-flex">
    <a class="btn-link" @click="goLink(1)"> <span class="iconfont icon-youxiang"  style="color: #333; font-size: 18px" ></span>邮箱</a>
    <a class="btn-link" @click="goLink(2)"> <span class="iconfont icon-rizhifuwu"  style="color: #333; font-size: 18px" ></span>日志</a>
    <a class="btn-link" @click="goLink(3)"> <span class="iconfont icon-shezhi1"  style="color: #333; font-size: 18px" ></span>系统</a>
    <a class="btn-link" @click="goLink(4)"> <span class="iconfont icon-zongjiaoyishoushu-01"  style="color: #333; font-size: 18px" ></span>关于</a>
  </div>
  <tabbar />
</template>

<style scoped lang="scss">
.box-head {
  height: 110px;
  display: flex;
  padding: 20px 10px 10px 10px;
  border-bottom: 1px solid #e1e0e0;
  // justify-content: space-around;
  img {
    width: 40px;
    height: 40px;
  }
}
.box-right {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  .name {
    font-size: 14px;
    color: #333;
  }
  .account {
    font-size: 14px;
    color: #999;
  }
  .btn {
    font-size: 16px;
    color: #6696ab;
    margin-top: 10px;
  }
}
.box-flex {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #333;
}
.btn-link {
  span {
    color: #333;
    font-size: 16px;
    margin-right: 10px;
  }
  i {
    border: 1px solid #157df8;
    color: #157df8;
    font-style: normal;
    font-size: 12px;
    border-radius: 20px;
    padding: 0 10px;
  }
  &:hover {
    background-color: #ebebeb;
  }
  text-decoration: none;
  padding: 10px;
}
</style>
